<template>
  <!-- <h2>这是一个组件HelloWord</h2>
  <p>用户年龄:{{user.age}}</p>
  <button @click="user.age++">更改用户年龄</button>
  <p>用户汽车品牌:{{user.car.brand}}</p>
  <p>汽车生产地址:{{user.car.local.address}}</p>
  <button @click="user.car.brand+='@';user.car.local.address+='$';user.car.price++">更改汽车</button>
  <button @click="changeData">另一种更改</button>
  <button @click="changeToRaw">还原回正常对象</button>
  <p>展示整个用户:{{user}}</p>
  <button @click="addPhone">添加手机属性</button>
  <button @click="updatePrice">修改手机属性</button> -->
  <h2>这是一个子组件HelloWorld=={{num}}</h2>
  <button @click="num++">更改数字</button>
  <input type="text" v-model="msg">
  <p>消息值:{{msg}}</p>
  <hr>
</template>

<script>
import { ref, customRef, inject } from 'vue';
import Foo from './Foo.vue';
export default {
  name: 'HelloWorld',
  setup() {
    console.log('setup函数执行了');
    let num = ref(10);
    let msg = ref('aaa');
    // let num = ref(1);
    // let x = ref({
    //   num: 10,
    //   car: {
    //     brand: '比亚迪',
    //     price: 1000000
    //   }
    // });
    // let msg = ref('@');
    // let user = reactive({
    //   name: 'Tom',
    //   age: 24,
    //   address: '西安',
    //   car: {
    //     brand: '奔马',
    //     price: 1000000,
    //     local: {
    //       address: '咸阳'
    //     }
    //   }
    // });
    // const changeData = () => {
    //   user.car.brand = '驰宝';
    //   user.car.price++;
    //   user.car.local.address = '礼泉';
    //   x.value.num = 1;
    // };

    // let changeToRaw = () => {
    //   console.log(user);
    //   let u = toRaw(user);
    //   console.log(u);
    //   u.car.brand = 'AAA';
    // };

    // let addPhone = () => {
    //   const phone = {
    //     name: '小米',
    //     price: 1299
    //   };
    //   user.phone = markRaw(phone);
    // };

    // let updatePrice = () => {
    //   user.phone.price++;
    // };

    return {
      // x,
      msg,
      num
      // user,
      // changeToRaw,
      // addPhone,
      // updatePrice,
      // changeData
    };
  },
  beforeCreate() {
    console.log('beforeCreate钩子函数执行了...');
  },
  created() {
    console.log('created钩子函数执行了...');
  },
  beforeMount() {
    console.log('beforeMount钩子函数执行了...');
  },
  mounted() {
    console.log('mounted钩子函数执行了...');
  },
  beforeUpdate() {
    console.log('beforeUpdate钩子函数执行了...');
  },
  updated() {
    console.log('updated钩子函数执行了...');
  },
  beforeDestroy() {
    console.log('beforeDestroy钩子函数执行了...');
  },
  destroyed() {
    console.log('destroyed钩子函数执行了...');
  }
  // 1. 在Vue3中依然劫持Vue2的生命周期钩子函数
  // 2. setup函数的执行时机要早于beforeCreate
  // 3. 在Vue3使用Vue2形式生命周期的时候有两个钩子函数进行了更改
  // beforeDestroy====> beforeUnmount   destroyed======> unmounted
};
</script>

<style scoped>
</style>
